<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>秒表</title>
    <style>
        @keyframes tick6 {
            0%          { margin-top: 0; }
            16.6667%    { margin-top: -2rem;  }
            33.3333%    { margin-top: -4rem;  }
            50%         { margin-top: -6rem;  }
            66.6667%    { margin-top: -8rem;  }
            83.3333%    { margin-top: -10rem; }
            100%        { margin-top: -12rem; }
        }

        @keyframes tick10 {
            0%      { margin-top: 0; }
            10%     { margin-top: -2rem;  }
            20%     { margin-top: -4rem;  }
            30%     { margin-top: -6rem;  }
            40%     { margin-top: -8rem;  }
            50%     { margin-top: -10rem;  }
            60%     { margin-top: -12rem;  }
            70%     { margin-top: -14rem;  }
            80%     { margin-top: -16rem;  }
            90%     { margin-top: -18rem;  }
            100%    { margin-top: -20rem;  }
        }

        .digit-ten {
            animation: tick10 infinite step-end;
        }
        .digit-six {
            animation: tick6 infinite step-end;
        }


        body {
            overflow: hidden;
        }
        .container {
            text-align: center;
        }

        .digit {
            display: inline-block;
            height: 2rem;
            overflow: hidden;
            width: 1ch;
        }

        .digit span {
            display: block;
            height: 2rem;
            width: 100%;
        }

        .second .digit-six {
            animation-duration:6s;
            /*animation-timing-function: ease;*/
        }

        .second .digit-ten {
            animation-duration:1s;
        }

        .minute .digit-six {
            animation-duration:360s;
        }

        .minute .digit-ten {
            animation-duration:60s;
        }

        .centi-second:nth-last-child(3) .digit-ten{
            animation-duration:100ms;
        }
        .centi-second:nth-last-child(2) .digit-ten{
            animation-duration:10ms;
        }

    </style>
</head>
<body>
<div class="container">
    <div>
        时间流速*10倍，方便查看效果
    </div>
    <br>
    <div class="digit minute">
        <span class="digit-six">0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>0</span>
    </div>
    <div class="digit minute">
        <span class="digit-ten">0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>0</span>
    </div>
    <div class="digit">
        <span>:</span>
    </div>
    <div class="digit second">
        <span class="digit-six">0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>0</span>
    </div>
    <div class="digit second">
        <span class="digit-ten">0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>0</span>
    </div>
    &nbsp;
    <div class="digit centi-second">
        <span class="digit-ten">0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>0</span>
    </div>
    <div class="digit centi-second">
        <span class="digit-ten">0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>0</span>
    </div>

    <div class="digit">
        <span>'</span>
    </div>
</div>
</body>
</html>